<template>
  <div class="orgdetail" :style="moreDetailStyle">
    <div>
      <el-tabs v-if="orgName !== '请选择单位或部门'" v-model="activeName">
        <el-tab-pane label="基本信息" name="info">
          <Info
            :jgsyCode="jgsyCode"
            :flag="flag"
            :sourceTable="sourceTable"
            :infoTableName="infoTableName"
            :officeDetailInfo="officeDetailInfo"
            :centreSyNsjgDetailInfo="centreSyNsjgDetailInfo"
          >
          </Info>
        </el-tab-pane>
        <el-tab-pane v-if="type === 2" label="主要职责" name="duty">
          <Duty
            :jgsyCode="jgsyCode"
            :flag="flag"
          >
          </Duty>
        </el-tab-pane>
        <el-tab-pane v-if="type===2 && historyTableName" label="历史沿革" name="history">
          <History
            :jgsyCode="jgsyCode"
            :flag="flag"
            :historyTableName="historyTableName"
          >
          </History>
        </el-tab-pane>
        <el-tab-pane label="编制及使用情况" name="compile">
          <Compile
            :jgsyCode="jgsyCode"
            :flag="flag"
            :type="type"
            :sourceTable="sourceTable"
            :allPersonInfoList="allPersonInfoList"
            :officeDetailInfo="officeDetailInfo"
            :centreSyNsjgDetailInfo="centreSyNsjgDetailInfo"
          >
          </Compile>
        </el-tab-pane>
        <el-tab-pane v-if="sourceTable !== 'office'" label="领导职数及实配情况" name="count">
          <Count
            :jgsyCode="jgsyCode"
            :flag="flag"
            :type="type"
            :sourceTable="sourceTable"
            :allPersonInfoList="allPersonInfoList"
            :leaderCountObj="leaderCountObj"
            :centreSyNsjgDetailInfo="centreSyNsjgDetailInfo"
            @editSonHandler="editSonHandler"
          >
          </Count>
        </el-tab-pane>
        <el-tab-pane label="人员配置" name="person">
          <Person
            :jgsyCode="jgsyCode"
            :flag="flag"
            :type="type"
            :allPersonInfoList="allPersonInfoList"
            :leaderCountObj="leaderCountObj"
            @editSonHandler="editSonHandler"
          >
          </Person>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import Info from './detail/Info.vue'
import Duty from './detail/Duty.vue'
import History from './detail/History.vue'
import Compile from './detail/Compile.vue'
import Count from './detail/Count.vue'
import Person from './detail/Person.vue'

export default {
  components: {
    Info,
    Duty,
    History,
    Compile,
    Count,
    Person
  },
  name: 'OrgDetail',
  props: {
    activeName: '',
    jgsyCode: '',
    flag: '',
    orgName: '',
    type: '',
    historyTableName: '',
    infoTableName: '',
    sourceTable: ''
  },
  watch: {
    jgsyCode: {
      handler () {
        this.getLeaderCount()
        if (this.sourceTable === 'office') {
          this.getOfficeDetailInfo()
        } else if (this.sourceTable === 'centre_sy_nsjg') {
          this.getCentreSyNsjgDetailInfo()
        }
      },
      immediate: true
    }
  },
  data () {
    return {
      tableHeight: 100,
      moreDetailStyle: 'height:0px',
      allPersonInfoList: [],
      leaderCountObj: {},
      officeDetailInfo: {},
      centreSyNsjgDetailInfo: {}
    }
  },
  methods: {
    // 获取领导职数
    getLeaderCount () {
      this.$http
        .get(this.$http.defaults.headcountAPI + `api/bmldzs/getById?jgsyCode=${this.jgsyCode}`)
        .then(response => {
          if (response.data.success) {
            this.leaderCountObj = response.data.result
            this.getAllPersonList()
          } else {
            this.$message({
              message: '获取失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(error => {
          this.$message({
            message: '网络获取失败:' + error,
            type: 'error'
          })
        })
    },
    // 获取全部人员列表
    getAllPersonList () {
      const para = {
        pageNum: 1,
        pageSize: 10000
      }
      if (this.type === 2) {
        para.jgsyCode = this.jgsyCode
      } else if (this.type === 3) {
        para.szjg = this.jgsyCode
        const codeArr = this.jgsyCode.split('-')
        codeArr.pop()
        para.jgsyCode = codeArr.join('-')
      }
      this.$http
        .post(this.$http.defaults.headcountAPI + `api/tRyJbxx/queryByPage`, para)
        .then(response => {
          if (response.data.success) {
            this.allPersonInfoList = response.data.result.records
            if (this.type === 3) {
              this.allPersonInfoList = this.allPersonInfoList.filter(item => item.szjg)
            }
          } else {
            this.$message({
              message: '获取失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(error => {
          this.$message({
            message: '网络获取失败:' + error,
            type: 'error'
          })
        })
    },
    // 获取office详情
    getOfficeDetailInfo () {
      this.$http
        .get(this.$http.defaults.headcountAPI + `api/office/getById?jgsyCode=${this.jgsyCode}`)
        .then(response => {
          if (response.data.success === true) {
            this.officeDetailInfo = response.data.result
          } else {
            console.log('获取失败:' + response.data.message)
            this.$message({
              message: '获取失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(error => {
          console.log(error)
          this.$message({
            message: '获取失败:' + error,
            type: 'error'
          })
        })
    },
    // 获取centreSyNsjg详情
    getCentreSyNsjgDetailInfo () {
      this.$http
        .get(this.$http.defaults.headcountAPI + `api/centreSyNsjg/getById?jgsyCode=${this.jgsyCode}`)
        .then(response => {
          if (response.data.success === true) {
            this.centreSyNsjgDetailInfo = response.data.result
          } else {
            console.log('获取失败:' + response.data.message)
            this.$message({
              message: '获取失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(error => {
          console.log(error)
          this.$message({
            message: '获取失败:' + error,
            type: 'error'
          })
        })
    },
    // 监听子组件
    editSonHandler () {
      this.getLeaderCount()
    },
    setheight (obj) {
      var clientHeight = 0
      if (document.body.clientHeight && document.documentElement.clientHeight) {
        clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
      } else {
        clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
      }
      obj.moreDetailStyle = 'height:' + (clientHeight - 210) + 'px'
      obj.tableHeight = clientHeight - 243
    }
  },
  mounted () {
    let _this = this
    window.onresize = function windowResize () {
      // 通过捕获系统的onresize事件触发我们需要执行的事件
      _this.setheight(_this)
      console.log('test0:' + _this.moreDetailStyle)
    }
  }
}
</script>

<style>
#orgdetail{
  overflow: hidden;
}
#orgdetail .el-tabs__header{
  height: 29px;
  background: #FAFAFA;
  line-height: 30px;
  font-family: '宋体';
  padding:0 20px;
  border-bottom: 2px solid #E4E7ED;
  margin:0;
}
#orgdetail .el-tabs__item{
  line-height: 30px;
  height: 30px;
  font-weight:bolder;
}
#orgdetail .mytable table{
  border-top: 1px solid #74A6CC;
  border-left: 1px solid #74A6CC;
  margin: 10px;
  width: calc(100% - 20px);
  font-size:var(--size14) !important;
  font-family: '宋体'
}
#orgdetail .mytable th,
#orgdetail .mytable td{
  padding: 10px;
  border-right: 1px solid #74A6CC;
  border-bottom: 1px solid #74A6CC;
  vertical-align: middle;
  line-height: 150%;
}
#orgdetail .mytable th{
  width: 200px !important;
  background:#C0DCF1;
}
#orgdetail .mytable td{
  text-align: left;
  width: calc((100vw - 800px) / 2) !important;
}
#orgdetail .centertable td{
  text-align: center;
}
#orgdetail .el-table th{
  font-weight: normal;
  background-image: linear-gradient(to bottom , #f8f8f8, #efefef);
}
#orgdetail .el-table td, .el-table th{
  padding:0;
  font-size:var(--size14) !important;
  line-height: 20px;
  font-family: '宋体'
}
#orgdetail .mytable .el-form .el-form-item{
  margin-bottom: 0;
}
.tableth{
  background-image: linear-gradient(to bottom , #f8f8f8, #efefef);
}
.bztable{
  text-align: center;
}
#orgdetail .bztable th{
  width: 300px;
  vertical-align: middle;
}
#orgdetail .detailinfotable th{
  width:200px;
}
.zhize{
  line-height: 200%;
}

.wboxd {
  padding:0;
  width: calc(100% - 2px);
  background: #fff;
  border: 1px solid #95B8E7;
  overflow: hidden;
}
.wboxd .el-table th {
  font-weight: normal;
  background-image: linear-gradient(to bottom , #f8f8f8, #efefef);
}
.wboxd .el-table tr {
  height: 52px;
}
.wboxd .el-table td, .el-table th {
  padding:0;
  font-size:var(--size14) !important;
  line-height: 20px;
  font-family: '宋体'
}
.wboxd .el-table--border th, .el-table--border td {
  border-right: 1px solid #95B8E7;
}
.wboxd .el-table th.is-leaf, .el-table td {
  border-bottom: 1px solid #95B8E7;
}
.wboxd .el-table td {
  border-right: 1px solid #95B8E7;
  border-bottom: 1px solid #95B8E7;
}
</style>
